<template>
	<view>
		<view class="header">
			<u-search :inputStyle="{	fontFamily: 'PingFang SC'}" :actionStyle="{
				background: '#FFFFFF',
				width: '180rpx',
			    height: '60rpx',
				lineHeight: '60rpx',
				fontFamily: 'PingFang SC',
				borderRadius: '30rpx',
			   alignItems: 'center',
			   textAlign: 'center'
			   }" placeholder="请输入型号" inputAlign="center" v-model="model" height="70" actionText="查询" @custom="custom">
			</u-search>

		</view>
		<view class="content-box">

			<u-image :src="url+windPlc.picUrl" width="80px" height="80px" mode="widthFit"
				@click="imgClick(windPlc.picUrl)">
			</u-image>
			<view class="title">{{windPlc.model}}</view>
			<u-parse style="margin-left: 20rpx;margin-right: 20rpx;" :html="windPlc.content" :domain="domain"></u-parse>

		</view>
		<view>
			<u-cell-group>

				<u-cell-item :value-style="{fontSize:'28rpx',color: '#333333',fontFamily: 'PingFang SC'}" isLink=""
					:value="windPlc.type||''">
					<view slot="title" class="cell-title">系列</view>
				</u-cell-item>


				<u-cell-item :value-style="{fontSize:'28rpx',color: '#333333',fontFamily: 'PingFang SC'}"
					:value="windPlc.cpu||''" isLink="">
					<view slot="title" class="cell-title">处理器CPU</view>
				</u-cell-item>
				<u-cell-item :value-style="{fontSize:'28rpx',color: '#333333',fontFamily: 'PingFang SC'}" isLink=""
					:value="windPlc.typeContent||''">
					<view slot="title" class="cell-title">类别属性</view>
				</u-cell-item>
				<u-cell-item :value-style="{fontSize:'28rpx',color: '#333333',fontFamily: 'PingFang SC'}" isLink=""
					:value="windPlc.controlSoft||''">
					<view slot="title" class="cell-title">控制软件</view>
				</u-cell-item>
				<u-cell-item :value-style="{fontSize:'28rpx',color: '#333333',fontFamily: 'PingFang SC'}" isLink=""
					:value="windPlc.system||''">
					<view slot="title" class="cell-title">操作系统</view>
				</u-cell-item>

				</u-cell-item>
				<u-cell-item :value-style="{fontSize:'28rpx',color: '#333333',fontFamily: 'PingFang SC'}" isLink=""
					:value="windPlc.ethernet||''">
					<view slot="title" class="cell-title">通讯接口</view>
				</u-cell-item>

				</u-cell-item>
				<!-- <u-cell-item :value-style="{fontSize:'28rpx',color: '#333333',fontFamily: 'PingFang SC'}" isLink=""
					@click="argsLink()">
					<view slot="title" class="cell-title">参数简介</view>
				</u-cell-item>
 -->


			</u-cell-group>
			<view class="content-box-bottom">
				<u-image :src="url+windPlc.codeUrl" width="80px" height="80px" mode="widthFit"
					@longpress="codeImgClick(windPlc.qrcodeUrl)">
				</u-image>
			</view>
		</view>
		<u-picker mode="selector" v-model="show" :default-selector="[0]" :range="windPlcs" range-key="model"
			@confirm="confirm"></u-picker>
		<!-- <u-picker :show="show" ref="uPicker" keyName="type" 
		:columns="columns" @confirm="confirm" @cancel="cancel"
			> -->
		</u-picker>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				model: "",
				url: this.baseUrl,
				windPlcs: [],
				windPlc: {
					cpu: "",
					type: "",
					system: "",
					controlSoft: "",
					ethernet: "",
					codeUrl: "",
					picUrl: "",
					content: ""
				},
				show: false,
			}
		},
		mounted() {},
		onLoad(option) {

		},
		methods: {
			argsLink() {
				// #ifdef APP-PLUS
				plus.runtime.openURL(this.windPlc.codeUrl)
				// #endif
				// #ifdef H5
				window.open(this.windPlc.codeUrl)
				// #endif
				// #ifdef MP
				uni.setClipboardData({
					data: this.windPlc.codeUrl,
					success: () => {
						uni.hideToast();
						this.$nextTick(() => {
							this.$u.toast('链接已复制，请在浏览器打开');
						})
					}
				});
				// #endif
			},
			imgClick(url) {
				wx.previewImage({
					urls: [this.baseUrl + url], //需要预览的图片http链接列表，多张的时候，url直接写在后面就行了
					current: '', // 当前显示图片的http链接，默认是第一个
					success: function(res) {},
					fail: function(res) {},
					complete: function(res) {},
				})
			},
			codeImgClick(url) {

				uni.navigateTo({
					url: '/subpackage/tool/wind/wind_web?url=' + url
				})
			},
			custom(e) {
				this.getWindPlcs(this.model);
			},
			confirm(e) {
				this.windPlc = this.windPlcs[e[0]];
				this.show = false;
			},
			cancel(e) {
				this.show = false;
			},

			getWindPlcs(model) {
				this.$u.api.getWindPlcs({
						pageNum: this.pageNum,
						pageSize: this.pageSize,
						model: this.model,
					})
					.then(res => {
						if (res.rows.length == 0) {
							this.windPlc = {};
							this.show = false;
							uni.showToast({
								title: "抱歉暂无此型号!",
								icon: "none"
							})
						} else if (res.rows.length == 1) {
							this.show = false;
							this.windPlc = res.rows[0];
						} else {
							this.windPlcs = res.rows;
							this.show = true;
						}

					});
			}

		},
	}
</script>
<style lang="scss">
	.header {
		background-color: #3BA2FF;
		padding-top: 24rpx;
		padding-bottom: 24rpx;
		padding-left: 20rpx;
		padding-right: 20rpx;
		align-items: center;
		justify-content: center;
		display: flex;
	}

	.cell-text {
		font-family: PingFang SC;
		font-weight: 500;
		color: #999999;
		line-height: 48px;
	}

	.content-box {
		align-items: center;
		justify-content: center;
		display: flex;
		flex-direction: column;
		padding: 30rpx;

		.content {
			font-size: 22rpx;
			font-family: PingFang SC;
			color: #808080;
		}

		.title {
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #333333;
			line-height: 48rpx;
		}
	}

	.cell-title {
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #999999;
	}

	.cell-value {
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #333333;
	}

	.content-box-bottom {
		align-items: center;
		justify-content: center;
		display: flex;
		flex-direction: column;
		padding: 30rpx;
	}
</style>
